<template>
  <div id="forum">
    <!-- 这页是动态里面的论坛页 -->
    <div id="Popular"><span>热门游戏论坛</span><a href="">更多</a></div>
    <!-- 大图 -->
    <div id="Popular-map">
      <router-link to="/details/10006">
        <p class="Popular-map-big">
          <img src="http://8.142.22.78:3000/images/sixth1.jpg" alt="" />
          <span
            ><div>
              <h5>忍者必须死3</h5>
              <p>197万+关注·202新帖·求助</p>
            </div>
            <a><img src="../../../assets/images/attention.png" alt="" /></a
          ></span>
        </p>
      </router-link>
    </div>
    <!-- 列表 -->
    <div id="Popular-list">
      <ul>
        <li v-for="item of tabgamesList.arr" :key="item.id">
          <router-link :to="'/details/' + item.id">
            <div class="Popular-list-left">
              <p class="left-img"><img :src="item.url" alt="" /></p>
              <p class="left-text">
                <em>{{ item.title }}</em
                ><span>{{ item.attention }}·{{ item.newpost }}</span>
              </p>
            </div>
          </router-link>
          <a class="Popular-list-right"
            ><img src="../../../assets/images/attention.png" alt=""
          /></a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { reactive, onMounted } from "vue";
export default {
  setup() {
    let tabgamesList = reactive({ arr: [] });
    const shuju = () => {
      fetch("http://8.142.22.78:3000/api/home/list")
        .then((response) => response.json())
        .then((res) => {
          if (res.status == 0) {
            tabgamesList.arr = res.result;
          }
        });
    };
    onMounted(() => {
      shuju();
    });
    return {
      shuju,
      tabgamesList,
    };
  },
};
</script>
<style lang="less" scoped>
#forum {
  width: 100%;
  #Popular {
    width: 100%;
    height: 46px;
    padding: 0 16px;
    display: flex;
    justify-content: space-between;
    span {
      font-size: 17px;
      align-self: center;
    }
    a {
      font-size: 13px;
      color: #0adeee;
      align-self: center;
    }
  }
  #Popular-map {
    width: 100%;
    height: 184px;
    display: flex;
    justify-content: center;
    align-content: center;
    .Popular-map-big {
      width: 344px;
      height: 100%;
      position: relative;
      span {
        display: flex;
        position: absolute;
        height: 31px;
        width: 311px;
        bottom: 12px;
        left: 16px;
        justify-content: space-between;
        h5 {
          font-size: 15px;
          color: #ffff;
        }
        p {
          font-size: 10px;
          color: #ffff;
        }
        a {
          width: 75px;
          height: 30px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    img {
      height: 100%;
      width: 100%;
      border-radius: 5px;
    }
  }
  #Popular-list {
    width: 100%;
    height: 100%;
    margin-top: 19px;
    li {
      width: 100%;
      height: 71px;
      padding: 0 17px 0 14px;
      display: flex;
      justify-content: space-between;
      align-content: center;
      .Popular-list-left {
        align-self: center;
        display: flex;
        .left-img {
          width: 50px;
          height: 50px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .left-text {
          margin-left: 15px;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          em {
            font-size: 13px;
          }
          span {
            font-size: 12px;
            color: #a9a9a9;
          }
        }
      }
      .Popular-list-right {
        align-self: center;
        width: 75px;
        height: 30px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
